<template>
  <div>
    <MglGeojsonLayer
      :sourceId="pointSource.id"
      :source="pointSource.source"
      :layerId="pointLayer.id"
      :layer="pointLayer"
    ></MglGeojsonLayer>
    <MglGeojsonLayer
      :sourceId="lineSource.id"
      :source="lineSource.source"
      :layerId="lineLayer.id"
      :layer="lineLayer"
    ></MglGeojsonLayer>
    <!-- <MglMarker
      v-for="(item,index) in disArr"
      :coordinates="item.coordinates"
      :key="index"
      :draggable="true"
    >
      <div slot="marker" class="distance-single">
        <div>{{item.lineDis}}米</div>
      </div>
    </MglMarker>-->
  </div>
</template>

<script>
import { MglGeojsonLayer, MglMarker } from "vue-mapbox";
import { mapGetters } from "vuex";
import { watch } from "fs";
export default {
  components: {
    MglGeojsonLayer,
    MglMarker
  },
  data() {
    return {
      pointSource: {
        id: "pointJson",
        source: {
          type: "geojson",
          data: {
            type: "FeatureCollection",
            features: [
              // {
              //   type: "Feature",
              //   geometry: {
              //     type: "Point",
              //     coordinates: [121.46842500587502, 30.792719079404208]
              //   }
              // }
            ]
          }
        }
      },
      pointLayer: {
        id: "points",
        type: "circle",
        paint: {
          "circle-color": "#111"
        }
      },
      lineSource: {
        id: "linesJson",
        source: {
          type: "geojson",
          data: {
            type: "FeatureCollection",
            features: [
              //   {
              //     type: "Feature",
              //     geometry: {
              //       type: "LineString",
              //       coordinates: [
              //         [121.46842500587502, 30.792719079404208],
              //         [121.46869599801698, 30.79184538177202]
              //       ]
              //     }
              //   },
              //   {
              //     type: "Feature",
              //     geometry: {
              //       type: "LineString",
              //       coordinates: [
              //         [121.4675280300172, 30.791177278089094],
              //         [121.46777429159869, 30.79025650899426]
              //       ]
              //     }
              //   }
            ]
            // features: [
            //   {
            //     "type": "Feature",
            //     "geometry": {
            //       "type": "LineString",
            //       "coordinates": [
            //         [121.46805110901153, 30.79237263361854],
            //         [121.4683004986303, 30.791797218664158],
            //         [121.46847235529862, 30.791265567289415]
            //       ]
            //     }
            //   },
            //   {
            //     "type": "Feature",
            //     "geometry": {
            //       "type": "LineString",
            //       "coordinates": [
            //         [121.46847235529862, 30.791265567289415]
            //       ]
            //     }
            //   }]
          }
        }
      },
      //   lineSource: {
      //   id: "linesJson",
      //   source: {
      //     type: "geojson",
      //     data: {
      //       type: "Feature",
      //       geometry: {
      //         type: "LineString",
      //         coordinates: [
      //           //   [121.46842500587502, 30.792719079404208],
      //           //   [121.46869599801698, 30.79184538177202]
      //         ]
      //       }
      //     }
      //   }
      // },
      lineLayer: {
        id: "lines",
        type: "line",
        paint: {
          "line-width": 2,
          "line-color": "#111"
        }
      },
      disArr: []
    };
  },

  created() {},
  computed: {
    ...mapGetters(["lineArr", "dotArr", "distanceArr"])
  },
  methods: {},
  watch: {
    lineArr: {
      handler(newValue, oldValue) {
        // debugger;
        // console.log(JSON.stringify(newValue))
        this.lineSource.source.data.features = newValue;
      },
      deep: true
    },
    dotArr: {
      handler(newValue, oldValue) {
        // debugger;
        this.pointSource.source.data.features = newValue;
      },
      deep: true
    },
    distanceArr: {
      handler(newValue, oldValue) {
        this.disArr = newValue;
      },
      deep: true
    }
  }
};
</script>
<style scoped>
.distance-single {
  background-color: rgba(0, 0, 0, 0.66);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  display: block;
  margin-top: 25px;
  padding: 5px 10px;
  border-radius: 3px;
}
</style>